<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>客户编辑</title>
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
</head>
<body style="overflow-y:scroll">
<div class="addemployee-wrap" id="employee-wrap">
	<div class="form-wrap" >
		<form class="layui-form" id="defaultForm" th:method="post" lay-filter="employee-form">
			<input type="hidden" name="id" th:value="${record.id}" >
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>客户名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="customerName" th:value="${record.customerName}" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">行业</label>
			    <div class="layui-input-block">
			      <select name="fkDicIndustry" id="fkDicIndustry"></select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">公司类型</label>
			    <div class="layui-input-block">
			       <select name="fkDicCorporateType" id="corporateType">
			       </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">客户公司</label>
			    <div class="layui-input-block">
			      <input type="text" name="corporateName" th:value="${record.corporateName}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>联系人</label>
			    <div class="layui-input-block">
			      <input type="text" name="contactsName" th:value="${record.contactsName}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">手机</label>
			    <div class="layui-input-block">
			      <input type="text" name="contactsTelephone" th:value="${record.contactsTelephone}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">代理人电话</label>
			    <div class="layui-input-block">
			      <input type="text" name="agentTelephone" th:value="${record.agentTelephone}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">微信</label>
			    <div class="layui-input-block">
			      <input type="text" name="wechat" th:value="${record.wechat}" placeholder="" autocomplete="off" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">邮箱</label>
			    <div class="layui-input-block">
			      <input type="text" name="mailbox" th:value="${record.mailbox}" placeholder="" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">意向分店</label>
			    <div class="layui-input-block">
			    	<select name="intentionShop" id="intentionShop" ></select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">客户意向</label>
			    <div class="layui-input-block">
			     	<input type="checkbox" value="1" name="positionRental" th:checked="${record.positionRental==1}" title="工位租赁" lay-skin="primary" lay-filter="csmIntention">
			     	<div class="content" th:classappend="${record.positionRental!=1?'hide':''}" >
			     		<div class="layui-form-item">
						    <label class="layui-form-label">工位类型</label>
						    <div class="layui-input-block">
						        <input type="checkbox" name="fkDicPositionType" th:checked="${#strings.contains(record.fkDicPositionType,'0')}" value="0" title="开放工位" lay-skin="primary">
						        <input type="checkbox" name="fkDicPositionType" th:checked="${#strings.contains(record.fkDicPositionType,'1')}" value="1" title="独立办公间" lay-skin="primary">
						        <input type="checkbox" name="fkDicPositionType" th:checked="${#strings.contains(record.fkDicPositionType,'2')}" value="2" title="灵活办公区" lay-skin="primary">
						        <input type="checkbox" name="fkDicPositionType" th:checked="${#strings.contains(record.fkDicPositionType,'3')}" value="3" title="灵活工位" lay-skin="primary">
						    </div>
						    <div class="layui-input-block">
						        <input type="radio" name="rentingStyle" value="0" title="按面积出租" th:checked="${record.rentingStyle==0}" lay-filter="rentingStyle">
						        <input type="radio" name="rentingStyle" value="1" title="按工位出租" th:checked="${record.rentingStyle==1}" lay-filter="rentingStyle">
						    </div>
						    
						</div>	
						<div class="layui-form-item">
							<div class="layui-inline hide" id="liveP">
							    <label class="layui-form-label">入驻人数</label>
							    <div class="layui-input-inline">
							    	<select name="residentNumber">
							    		<option value="" ></option>
								   	</select>
							    </div>
							 </div>	
							 <div class="layui-inline hide" id="leaseArea">
							    <label class="layui-form-label">租赁面积</label>
							    <div class="layui-input-inline">
							    	<select name="area">
							    		<option value="" ></option>
							     	 	<option value="0">1-10</option>
								        <option value="1">11-20</option>
								        <option value="2">21-50</option>
								        <option value="3">51-100</option>
								        <option value="4">101-200</option>
								        <option value="5">200以上</option>
								   </select>
							    </div>
							 </div>			
							<div class="layui-inline hide" id="rMonths">
							    <label class="layui-form-label">入驻月数</label>
							    <div class="layui-input-inline">
							    	<select name="residentMonths">
							     	 	<option value="" ></option>
								   </select>
							    </div>
							 </div>		
						</div>		
			     	</div>
			    </div>
			    <div class="layui-input-block">
					<input type="checkbox" name="fieldRental" th:checked="${record.fieldRental==1}" value="1" title="场地租赁" lay-skin="primary" lay-filter="csmIntention">
					<div class="content" th:classappend="${record.fieldRental!=1?'hide':''}" >
						<div class="layui-form-item">
						    <label class="layui-form-label">容纳人数</label>
						    <div class="layui-input-inline">
						      <select name="capacity" xm-select-skin="normal">
						     	 	<option value="0">1</option>
							        <option value="1">2</option>
							        <option value="2">3</option>
							   </select>
						    </div>
						</div>
					</div> 
				</div>
				<div class="layui-input-block">
					<input type="checkbox" name="other" th:checked="${record.other==1}" value="1" title="其它" lay-skin="primary" lay-filter="csmIntention" >
					<div class="content" th:classappend="${record.other!=1?'hide':''}" >
						<div class="layui-form-item">
						    <label class="layui-form-label">具体信息</label>
						    <div class="layui-input-inline">
						       <textarea name="specificInformation" th:text="${record.specificInformation}" placeholder="请输入" class="layui-textarea" style="width:400px;height:120px"></textarea>
						    </div>
						</div>
					</div> 
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>客户来源</label>
			    <div class="layui-input-block">
			      <select name="customerSource" >
			       	<option value=""></option>
			        <option value="0" th:selected="${record.customerSource==0}" >线上</option>
			        <option value="1" th:selected="${record.customerSource==1}" >中介</option>
			        <option value="2" th:selected="${record.customerSource==2}" >社交网络</option>
			        <option value="3" th:selected="${record.customerSource==3}" >推荐</option>
			      </select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">具体来源</label>
			    <div class="layui-input-block">
			    	<input type="text" name="specificSource" th:value="${record.specificSource}" class="layui-input" >
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">入驻意愿</label>
			    <div class="layui-input-block">
			    	<select name="admissionDesire" >
			        	<option value=""></option>
			        	<option value="0" th:selected="${record.admissionDesire==0}" >很强烈</option>
			        	<option value="1" th:selected="${record.admissionDesire==1}" >一般</option>
			   		</select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>销售阶段</label>
			    <div class="layui-input-block">
			    	<select name="customerState" >
			        	<option value=""></option>
			        	<option value="0" th:selected="${record.customerState==0}" >初步接洽</option>
			        	<option value="1" th:selected="${record.customerState==1}" >赢单</option>
			        	<option value="2" th:selected="${record.customerState==2}" >流失</option>
			   		</select>
			    </div>
			</div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>销售团队</legend>
			</fieldset>
			<div class="layui-form-item">
			    <label class="layui-form-label"><span class="must-fill">*</span>执行人</label>
			    <div class="layui-input-block">
			    	<select name="executor" id="executor" >
			        	<option value=""></option>
			   		</select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">团队人员</label>
			    <div class="layui-input-block">
			    	<select name="teamStaffList" id="teamstaff" xm-select="teamstaff" xm-select-skin="normal" >
			        	<option value="1">1</option>
			        	<option value="2">2</option>
			        	<option value="3">3</option>
			   		</select>
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">备注</label>
			    <div class="layui-input-block">
			    	<textarea name="remarks" placeholder="请输入" th:text="${record.remarks}" class="layui-textarea" ></textarea>
			    	<span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">备注信息内部可见</span>
			    </div>
			</div>
			
			<div class="layui-form-item">
			    <div class="layui-input-block">
			      <button type="button" class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="submit-btn">提交</button>
			      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
			    </div>
			</div>
		</form>	
	</div>
</div>
</body>

<script th:inline="javascript">

//用来记录团队人员id集合,值是从模版中获取到的 使用js格式化 最后赋值到select下拉中
var teamstaff=new Array();
$.each([[${record.sellTeamStaff}]],function(i,v){
	teamstaff.push(v.fkUser);
});
$(function() {
	
	//初始化入住人数,初始化入住月数,容纳人数的候选项
	var rn = $("select[name='residentNumber'],select[name='residentMonths'],select[name='capacity']");
	for (var i = 1; i <= 50; i++) {
		rn.append("<option value=\"" + i + "\">" + i + "</option>");
	}
	//开始初始化对应值，一定要在表单渲染之前初始化  或者从新调用表单渲染
	$("select[name='residentNumber']").val([[${record.residentNumber}]]);//初始化入住人数值
	$("select[name='residentMonths']").val([[${record.residentMonths}]]);//初始化入住月数
	$("select[name='capacity']").val([[${record.capacity}]]);//初始化容纳人数
	$("select[name='area']").val([[${record.area}]]);//初始化租赁面积
	
	
	//layui 部分*******************
	layui.config({
		base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	}).extend({
		formSelects: 'formSelects-v3'
	}).use(['element', "layer", "form", 'formSelects'],function() {
		var layer = layui.layer,
		form = layui.form,
		formSelects = layui.formSelects;
		
		//select2 赋值
		initFormSelects("corporateType", "/system/data-dic/selectjson/dic_corporate_type",[[${record.fkDicCorporateType}]]); //公司类型 
		initFormSelects("fkDicIndustry", "/system/data-dic/selectjson/dic_customer_industry",[[${record.fkDicIndustry}]]); //行业 
		initFormSelectsExt({//分店
			id: "intentionShop,#fkProjectid,#winProjectid",
			url: "/app/customerInfo/getProjectJson",
			defaultValue:[[${record.intentionShop}]],
			first: "请选择分店"
		});
		initFormSelectsExt({//执行人和团队人员
			id: "teamstaff,#executor",
			url: "/system/org/user/selectjson",
			done:function(){
				//执行人默认值
				$("#executor").val([[${record.executor}]]);
				//团队人员默认值
				renderForm();
				formSelects.value('teamstaff', teamstaff);//设置下拉默认值
			}
		});
		
		//表单验证部分
		form.verify({
			userid: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value == "") {
					return '登录名不能为空';
				}
			}
		});
		
		//监听提交
		form.on('submit(submit-btn)',function(data) {
			var selVal = formSelects.value('teamstaff', 'valStr'); //获取团队人员多选下拉的值
			var checkVal = "";
			var $t = $("input[name='fkDicPositionType']:checked");//工位类型
			$.each($t,function(i, v) {
				checkVal += $(v).val() + ",";
			});
			data.field.fkDicPositionType = checkVal; //工位类型
			$.post("/app/customerInfo/editCustomer", {
				cusJson: JSON.stringify(data.field),//客户基本数据
				teamStaff: selVal
			},function(data) {
				layer.msg(data.error, {
					icon: 1,
					shade: [0.1, '#393D49']
				},function(){
					parent.layer.closeAll();
				});
			},'json');
			return false;
		});
		//选择客户意向
		form.on('checkbox(csmIntention)',function(data) {
			var fleg = data.elem.checked;
			fleg ? $(data.othis).next(".content").removeClass("hide") : $(data.othis).next(".content").addClass("hide");
		});
		
		//出租方式 绑定单选按钮更改时 显示对应的表单
		form.on('radio(rentingStyle)',rentingStyleChange);
		//页面初始化完成后执行一次 由于是编辑页面要根据已存在值显示对应表单
		var data={value:$("input[name='rentingStyle']:checked").val()};
		if(data.value){
			rentingStyleChange(data);
		} 
		function rentingStyleChange(data) {
			$("#rMonths").removeClass("hide");
			if (data.value == 1) {
				$("#liveP").removeClass("hide");
				$("#leaseArea").addClass("hide");
			} else {
				$("#leaseArea").removeClass("hide");
				$("#liveP").addClass("hide");
			}
		}
	});
});
</script>
</html>